/*
 * @Descripttion: 
 * @version: 1.0
 * @Author: wuhao
 * @Date: 2021-08-25 17:18:02
 * @LastEditors: wuhao
 * @LastEditTime: 2021-08-25 17:23:06
 */
class Application {
    constructor() {
        this.canvas = null; // 画布
        this.ctx = null; // 环境
        this.w = 0; // 画布宽
        this.h = 0; // 画布高
        this.size = 18; // 字体大小
        this.codeList = []; // 位置列表
        this.init();
    }
    init() { // 初始化
        this.canvas = document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");
        window.addEventListener("resize", this.reset.bind(this));
        this.reset();
        this.render();
    }
    reset() {
        this.w = this.canvas.width = this.ctx.width = window.innerWidth;
        this.h = this.canvas.height = this.ctx.height = window.innerHeight;
        const {
            w,
            h,
            ctx,
            size,
            codeList
        } = this;
        ctx.fillStyle = 'rgba(0,0,0,1)';
        ctx.fillRect(0, 0, w, h);
        codeList.length = 0;
        for (let i = 0, len = ~~(w / size); i < len; i++) {
            codeList.push({
                x: i,
                y: ~~(Math.random() * h * .05) * -size
            })
        }
    }
    render() {
        this.step() // 主渲染
    }
    drawCodeRain() {
        const {
            w,
            h,
            ctx,
            codeList,
            size
        } = this;
        ctx.fillStyle = '#0f0';
        ctx.font = `${size}px serif`;
        codeList.forEach(point => {
            let _code = String.fromCharCode(97 + ~~(29 * Math.random()));
            ctx.fillText(_code, size * point.x + size / 2, point.y);
            if (point.y > size * h * Math.random() + h / 3) {
                point.y = 0;
            } else {
                point.y += size;
            }
        })
    }
    drawBackground() {
        const {
            w,
            h,
            ctx
        } = this;
        ctx.fillStyle = 'rgba(0,0,0,.075)';
        ctx.fillRect(0, 0, w, h);
    }
    step(delta) { // 重绘
        requestAnimationFrame(this.step.bind(this));
        this.drawBackground();
        this.drawCodeRain();
    }
}

window.onload = new Application();